import { createPortal } from "react-dom";
import "./Modal.css";
import { createRoot } from "react-dom/client";

export const Modal = (props: { visible: boolean; onClose?: () => void }) => {
  console.log("Modal渲染");
  const close = () => {
    if (props.onClose) {
      props.onClose?.();
    }
  };
  return createPortal(
    props.visible && (
      <div className="modal">
        <div className="modal-header">
          <div className="modal-title">标题</div>
        </div>
        <div className="modal-content">
          <h1>Modal</h1>
        </div>
        <div className="modal-footer">
          <button className="modal-close-button" onClick={close}>
            关闭
          </button>
          <button className="modal-confirm-button">确定</button>
        </div>
      </div>
    ),
    document.body
  );
};

Modal.info = () => {
  const container = document.createElement("div")
  const root = createRoot(container)
  root.render(<Modal visible={true} onClose={() => {
    root.unmount()
  }} />)
};
